<template>
    <page-header-wrapper>
      <a-card
        title="消息管理"
      >
        <template slot="extra">
          <a-button icon="plus" type="danger" @click="toAdd">发布消息</a-button>
        </template>
        <div class="table-operator">
          <s-table
            bordered
            ref="table"
            size="middle"
            :row-key="(record) => record.id"
            :columns="msgColumns"
            :data="messageData"
          >
            <template slot="msg_type" slot-scope="text">
              <a-tag color="red">
                {{msgOpts[text]}}
              </a-tag>
            </template>
            <template slot="action" slot-scope="text,record">
              <a-button size="small" type="primary" @click="toDetail(record.id)">详情</a-button>
            </template>
          </s-table>
        </div>
      </a-card>
    </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import { getAllMessage } from '@/api/message'
  import messageColumns from '@/columns/message'

  export default {
    components: {
      STable
    },
    name: 'AllMessage',
    data () {
      return {
        msgColumns: messageColumns.message,
        messageData: parameters => {
          return getAllMessage(Object.assign(parameters, this.queryParam)).then(res => {
            this.msgOpts = res.result.msg_opts
            return res.result
          })
        },
        queryParam: {},
        selectedRowKeys: [],
        activeType: 1,
        msgOpts: {}
      }
    },
    activated () {
      this.$refs.table.refresh(true)
    },
    methods: {
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      toDetail (id) {
        this.$router.push({ name: 'MessageDetail', params: { id } })
      },
      toAdd () {
        this.$router.push({ name: 'MessageAdd' })
      }
    }
  }
</script>

<style scoped>
  .message-type {
    margin-bottom: 20px;
  }
  .message-type button {
    margin-right: 5px;
  }
</style>
